<template>
	<div class="logview allbgc">
		<div class="logview-top logreg-top alltop">
			<span>
				<router-link to="/"><</router-link>
			</span>
			<p>
				<span>
					<router-link to="/reg">注册</router-link>
					/
					<router-link to="/log">登录</router-link>
				</span>
			</p>
		</div>
		<!-- ref的作用是对表单组件的引用 -->
		<van-form @submit="onSubmit" ref="regFrom">
		  <van-field
		    v-model="username"
		    name="username"
		    label="手机号"
		    placeholder="请填写手机号"
		    :rules="[{ required: true, message: '填写手机号' },{pattern:/^1[3-9]\d{9}$/,message:'手机号格式不正确'}]"
		  />
		  <van-field
		    v-model="password"
		    type="password"
		    name="password"
		    label="密码"
		    placeholder="请填写密码"
		    :rules="[{ required: true, message: '请填写密码' }]"
		  />
		  <van-field
		    v-model="vercode"
		    name="vercode"
		    label="验证码"
		    placeholder="请填写验证码"
			clearable
		    :rules="[{ required: true, message: '请填写验证码' },{pattern:/^\d{6}$/,message:'验证码格式错误'}]">
				<template #button>
					<van-button type="primary" native-type="button" size="small" @click="sendSms" :disabled="codeButDisabled">{{code_text}}</van-button>
				</template>
			</van-field>
			
		  <div style="margin: 16px;">
		    <van-button round block type="info" native-type="submit" color="#07c160" style="width: 280px;height: 40px;font-size: 14px;margin: 0 auto;">提交</van-button>
		  </div>
		</van-form>
	</div>
</template>

<script>
	import {reg,sendSms} from '../api/user.js'

	export default {
		data() {
			return {
				username: '',
				password: '',
				vercode: '',
				codeButDisabled:false,
				code_text:"发送验证码"
			}
		},
		methods: {
			onSubmit(values){
				console.log('submit',values);
				
				reg(values).then(res => {
					console.log(res)
					if (res.data.code == 0) {
						this.$toast('注册成功,请去登录',1500);
						this.$router.push('/log')
					} else {
						this.$toast('注册失败');
					}
				})
			},
			async sendSms(){
				try{
					let validate_res=await this.$refs.regFrom.validate("username")
					console.log(validate_res);
					// 如果验证成功  
					// 1.准备请求接口  让获取验证码的按钮不能再被点击
					this.codeButDisabled=true;
					this.code_text="发送中";
					
					sendSms({
						mobile:this.username,
						type:'register'
					}).then(res=>{
						console.log(res);
						if (res.data.code == 0) {
							// 发送成功
							this.$toast(`短信已经发送到手机号${this.username},请注意查收`);
									
							// 倒计时
							let count =60;
							let timer=setInterval(()=>{
								count--
								this.code_text=`${count}s后再次获取`;
								if(count<=0){
									// 倒计时结束 清除计时器  让按钮恢复成可点击的状态
									clearInterval(timer);
									this.code_text="再次发送"
									this.codeButDisabled=false;
									count=60
								}
							},1000)
							this.code_text="再次发送";
						} else{
							this.$toast(res.data.msg||'发送失败');
							this.codeButDisabled=false;
							this.code_text="再次发送";
						}
					}).catch(err=>{
						// 网络有波动的情况下
						console.log(err);
						this.$toast(err.data.msg||'发送失败');
						// 恢复可点击
						this.codeButDisabled=false;
						this.code_text="再次发送";
					})
				}catch(e){
					
				}
				
			}
		}
	}
</script>

<style lang="less">
	.regview-main {
		position: relative;
	}

	.msg_btn{
		color: #000;
		position: absolute;
		right: 10px;
		top: 115px;
	}
</style>
